<template>
    <view class="content">
        <view class="logis-info">
			<view class="header">物流信息</view>
			<view class="center">
				<image class="image" src="@/static/images/goods/logis_car.png"></image>
				<view class="right">
					<view class="text">
						<text class="title">物流公司：</text>
						{{ logisInfo.expName || '暂无'  }}
					</view>
					<view class="text">
						<text class="title">快递单号：</text>
						{{ logisInfo.number || '暂无'  }}
						<view class="copy-btn" @tap="onCopy(logisInfo.number)"><view class="copy-inner"></view></view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="load" v-if="stepList.length === 0">暂无物流信息</view>
				<u-steps v-else :list="stepList" :current="0" active-color="#FF3155" un-active-color="#CDCDCD" direction="column"></u-steps>
			</view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "logis",
        data() {
            return {
				logisInfo: {},
                stepList: [],
            }
        },
		onLoad(options) {
			uni.showLoading({
				title: '加载中...'
			});
        	this.$service.order.order.getWuLiuInfo({
				no: options.no
			}).then(res => {
				this.logisInfo = res;
				
				res.list.forEach(item => {
					this.stepList.push({
						name: item.status + '\n' + item.time
					})
				});
				
				uni.hideLoading();
			}).catch(err => {
				uni.hideLoading();
				uni.showToast({
					title: err.message,
					icon: 'none'
				})
			})
		}
    }
</script>

<style lang="scss" scoped>
.content {
	padding: 20rpx 24rpx;
	.logis-info {
		background: #fff;
		border-radius: 16rpx;
		.header {
			padding: 20rpx 26rpx;
			font-size: 28rpx;
			color: #2B2C2E;
			font-weight: 600;
		}
		.center {
			background: #F5F9FF;
			padding: 30rpx 28rpx;
			@include flexBox(flex-start, center);
			.image {
				width: 76rpx;
				height: 76rpx;
			}
			.right {
				margin-left: 20rpx;
				.text {
					color: #2B2C2E;
					font-size: 26rpx;
					line-height: 40rpx;
					@include flexBox(flex-start, center)
					.title {
						color: #78797A;
					}
					.addr-info {
						font-size: 28rpx;
						font-weight: 600;
					}
					.copy-btn {
						margin-left: 52rpx;
					}
				}
			}
		}
		.bottom {
			padding: 26rpx 32rpx;
			.load {
				text-align: center;
				margin: 20rpx 0;
				color: rgb(205, 205, 205);
			}
		}
	}
	/deep/.u-steps {
		.u-steps__item__text--column {
			text-align: left;
			white-space: unset;
			flex: 1;
			margin-bottom: 20rpx;
		}
	}
}
</style>